<template>
  <div class="content-box">
    <div class="tab-box">
      <el-tabs v-model="activeName">
        <el-tab-pane label="客户信息" name="1" v-if="$fieldShowFunc('11-khxx') || $fieldShowFunc('11-lxrxx')"></el-tab-pane>
        <el-tab-pane label="客户项目" name="2" v-if="$fieldShowFunc('11-khsj') || $fieldShowFunc('11-xmlb')"></el-tab-pane>
      </el-tabs>
    </div>
    <template v-if="activeName == 1">
      <div class="scroll-view-box">
        <div class="data-box-left">
          <div class="user-title-box" v-if="$fieldShowFunc('11-khxx')">基础信息
            <el-button class="blue-btn" @click="editFunc"
              v-if="$isPer(permission, ['customerDetail_edit'])">编辑</el-button>
          </div>
          <el-descriptions class="margin-bottom" :column="3" border>
            <el-descriptions-item label="会员编号" v-if="$fieldShowFunc('kh_hybh')">
              <div class="justify_6" slot="label">会员编号</div>
              {{ userData.member_id }}
            </el-descriptions-item>
            <el-descriptions-item label="客户姓名" v-if="$fieldShowFunc('kh_khxm')">
              <div class="justify_6" slot="label">客户姓名</div>
              {{ userData.name }}
            </el-descriptions-item>
            <el-descriptions-item label="联系方式" v-if="$fieldShowFunc('kh_lxfs')">
              <div class="justify_6" slot="label">联系方式</div>
              {{ userData.phone }}
            </el-descriptions-item>
            <el-descriptions-item label="年龄" v-if="$fieldShowFunc('kh_nl')">
              <div class="justify_6" slot="label">年龄</div>
              {{ userData.customer_age || '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="性别" v-if="$fieldShowFunc('kh_xb')">
              <div class="justify_6" slot="label">性别</div>
              {{ userData.customer_sex == 1 ? '男' : '女' }}
            </el-descriptions-item>
            <el-descriptions-item label="客户身份" v-if="$fieldShowFunc('kh_khsf')">
              <div class="justify_6" slot="label">客户身份</div>
              <span v-if="userData.customer_identity == 1">老板</span>
              <span v-if="userData.customer_identity == 2">合伙人</span>
              <span v-if="userData.customer_identity == 3">项目负责人</span>
              <span v-if="!userData.customer_identity">--</span>
            </el-descriptions-item>
            <el-descriptions-item label="客户类型" v-if="$fieldShowFunc('kh_khlx')">
              <div class="justify_6" slot="label">客户类型</div>
              <span v-if="userData.customer_type == 1">VIP客户</span>
              <span v-if="userData.customer_type == 2">优质客户</span>
              <span v-if="userData.customer_type == 3">普通老客户</span>
              <span v-if="userData.customer_type == 4">优质新客户</span>
              <span v-if="userData.customer_type == 5">普通新客户</span>
              <span v-if="!userData.customer_type">--</span>
            </el-descriptions-item>
            <el-descriptions-item label="会员类型" v-if="$fieldShowFunc('kh_hylx')">
              <div class="justify_6" slot="label">会员类型</div>
              <span v-if="userData.member_type == 1">新会员</span>
              <span v-if="userData.member_type == 2">VIP会员</span>
              <span v-if="userData.member_type == 3">VVIP会员</span>
              <span v-if="!userData.member_type">--</span>
            </el-descriptions-item>
            <el-descriptions-item label="渠道来源" v-if="$fieldShowFunc('kh_qdly')">
              <div class="justify_6" slot="label">渠道来源</div>
              <span v-if="userData.source == 1">品牌客户</span>
              <span v-if="userData.source == 2">电销</span>
              <span v-if="userData.source == 3">展会</span>
              <span v-if="userData.source == 4">转介绍</span>
              <span v-if="userData.source == 5">其他</span>
              <span v-if="!userData.source">--</span>
            </el-descriptions-item>
            <el-descriptions-item label="客户业务范围" v-if="$fieldShowFunc('kh_khywfw')">
              <div class="justify_6" slot="label">客户业务范围</div>
              {{ userData.business_area || '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="对客关注度" v-if="$fieldShowFunc('kh_dkgzd')">
              <div class="justify_6" slot="label">对客关注度</div>
              <span v-if="userData.customer_attention == 1">持续重点关注</span>
              <span v-if="userData.customer_attention == 2">持续关注</span>
              <span v-if="userData.customer_attention == 3">定期关注</span>
              <span v-if="userData.customer_attention == 4">不定期关注</span>
              <span v-if="userData.customer_attention == 5">一般关注</span>
              <span v-if="!userData.customer_attention">--</span>
            </el-descriptions-item>
            <el-descriptions-item label="目前经营品牌" v-if="$fieldShowFunc('kh_mqjypp')">
              <div class="justify_6" slot="label">目前经营品牌</div>
              {{ userData.current_operating_brand || '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="次社会关系" v-if="$fieldShowFunc('kh_cshgx')">
              <div class="justify_6" slot="label">次社会关系</div>
              <span v-if="userData.secondary_social_relations == 1">品牌关系户</span>
              <span v-if="userData.secondary_social_relations == 2">我司关系户</span>
              <span v-if="userData.secondary_social_relations == 3">政府关系户</span>
              <span v-if="userData.secondary_social_relations == 4">一般关系</span>
              <span v-if="!userData.secondary_social_relations">--</span>
            </el-descriptions-item>
            <el-descriptions-item label="客户态度" v-if="$fieldShowFunc('kh_khtd')">
              <div class="justify_6" slot="label">客户态度</div>
              <span v-if="userData.customer_attitude == 1">积极主动</span>
              <span v-if="userData.customer_attitude == 2">沟通顺畅</span>
              <span v-if="userData.customer_attitude == 3">敷衍了事</span>
              <span v-if="userData.customer_attitude == 4">拒不配合</span>
              <span v-if="!userData.customer_attitude">--</span>
            </el-descriptions-item>
            <el-descriptions-item label="年度开店计划" v-if="$fieldShowFunc('kh_ndkdjh')">
              <div class="justify_6" slot="label">年度开店计划</div>
              <span v-if="userData.annual_store_opening_plan == 1">不连续少量开店</span>
              <span v-if="userData.annual_store_opening_plan == 2">不连续大量开店</span>
              <span v-if="userData.annual_store_opening_plan == 3">持续且少量开店</span>
              <span v-if="userData.annual_store_opening_plan == 4">持续且大量开店</span>
              <span v-if="!userData.annual_store_opening_plan">--</span>
            </el-descriptions-item>
            <el-descriptions-item label="投资能力" v-if="$fieldShowFunc('kh_tznl')">
              <div class="justify_6" slot="label">投资能力</div>
              <span v-if="userData.investment_capability == 1">100w以下</span>
              <span v-if="userData.investment_capability == 2">100-500w</span>
              <span v-if="userData.investment_capability == 3">500-1000w</span>
              <span v-if="userData.investment_capability == 4">1000w以上</span>
              <span v-if="!userData.investment_capability">--</span>
            </el-descriptions-item>
            <el-descriptions-item label="关联品牌" v-if="$fieldShowFunc('kh_glpp')">
              <div class="justify_6" slot="label">关联品牌</div>
              {{ userData.brand_name || '--' }}
            </el-descriptions-item>
            <el-descriptions-item label="备注" v-if="$fieldShowFunc('kh_bz')">
              <div class="justify_6" slot="label">备注</div>
              {{ userData.remark || '--' }}
            </el-descriptions-item>
            <el-descriptions-item labelClassName="descriptions_opacity" contentClassName="descriptions_opacity"
              v-for="key in $fieldRowFunc(0, 0, 0)" :key="key"></el-descriptions-item>
          </el-descriptions>
          <template v-for="(item, index) in userData.partner_list">
            <div class="user-title-box" :key="index + 'title'" v-if="$fieldShowFunc('11-lxrxx')">联系人{{ index + 1 }}
            </div>
            <el-descriptions class="margin-bottom" :column="3" border :key="index">
              <el-descriptions-item label="联系人姓名" v-if="$fieldShowFunc('kh_lxrxm')">
                <div class="justify_6" slot="label">联系人姓名</div>
                {{ item.customer_name }}
              </el-descriptions-item>
              <el-descriptions-item label="联系方式" v-if="$fieldShowFunc('kh_lxrlxfs')">
                <div class="justify_6" slot="label">联系方式</div>
                {{ item.customer_phone }}
              </el-descriptions-item>
              <el-descriptions-item label="联系人身份" v-if="$fieldShowFunc('kh_lxrsf')">
                <div class="justify_6" slot="label">联系人身份</div>
                <span v-if="item.customer_identity == 1">老板</span>
                <span v-if="item.customer_identity == 2">合伙人</span>
                <span v-if="item.customer_identity == 3">项目负责人</span>
                <span v-if="!item.customer_identity">--</span>
              </el-descriptions-item>
              <el-descriptions-item label="对客关注度" v-if="$fieldShowFunc('kh_lxrdkgzd')">
                <div class="justify_6" slot="label">对客关注度</div>
                <span v-if="item.customer_attention == 1">持续重点关注</span>
                <span v-if="item.customer_attention == 2">持续关注</span>
                <span v-if="item.customer_attention == 3">定期关注</span>
                <span v-if="item.customer_attention == 4">不定期关注</span>
                <span v-if="item.customer_attention == 5">一般关注</span>
                <span v-if="!item.customer_attention">--</span>
              </el-descriptions-item>
              <el-descriptions-item label="客户态度" v-if="$fieldShowFunc('kh_lxrketd')">
                <div class="justify_6" slot="label">客户态度</div>
                <span v-if="item.customer_attitude == 1">积极主动</span>
                <span v-if="item.customer_attitude == 2">沟通顺畅</span>
                <span v-if="item.customer_attitude == 3">敷衍了事</span>
                <span v-if="item.customer_attitude == 4">拒不配合</span>
                <span v-if="!item.customer_attitude">--</span>
              </el-descriptions-item>
              <el-descriptions-item label="年度开店计划" v-if="$fieldShowFunc('kh_lxrndkdjh')">
                <div class="justify_6" slot="label">年度开店计划</div>
                <span v-if="item.annual_store_opening_plan == 1">不连续少量开店</span>
                <span v-if="item.annual_store_opening_plan == 2">不连续大量开店</span>
                <span v-if="item.annual_store_opening_plan == 3">持续且少量开店</span>
                <span v-if="item.annual_store_opening_plan == 4">持续且大量开店</span>
                <span v-if="!item.annual_store_opening_plan">--</span>
              </el-descriptions-item>
              <el-descriptions-item label="目前经营品牌" v-if="$fieldShowFunc('kh_lxrmqjypp')">
                <div class="justify_6" slot="label">目前经营品牌</div>
                {{ item.current_operating_brand }}
              </el-descriptions-item>
              <el-descriptions-item label="次社会关系" v-if="$fieldShowFunc('kh_lxrcshgx')">
                <div class="justify_6" slot="label">次社会关系</div>
                <span v-if="item.secondary_social_relations == 1">品牌关系户</span>
                <span v-if="item.secondary_social_relations == 2">我司关系户</span>
                <span v-if="item.secondary_social_relations == 3">政府关系户</span>
                <span v-if="item.secondary_social_relations == 4">一般关系</span>
                <span v-if="!item.secondary_social_relations">--</span>
              </el-descriptions-item>
              <el-descriptions-item label="投资能力" v-if="$fieldShowFunc('kh_lxrtznl')">
                <div class="justify_6" slot="label">投资能力</div>
                <span v-if="item.investment_capability == 1">100w以下</span>
                <span v-if="item.investment_capability == 2">100-500w</span>
                <span v-if="item.investment_capability == 3">500-1000w</span>
                <span v-if="item.investment_capability == 4">1000w以上</span>
                <span v-if="!item.investment_capability">--</span>
              </el-descriptions-item>
              <el-descriptions-item label="备注" v-if="$fieldShowFunc('kh_lxrbz')">
                <div class="justify_6" slot="label">备注</div>
                {{ item.remark }}
              </el-descriptions-item>
              <el-descriptions-item labelClassName="descriptions_opacity" contentClassName="descriptions_opacity"
                v-for="key in $fieldRowFunc(0, 0, 1)" :key="key"></el-descriptions-item>
            </el-descriptions>
          </template>
        </div>
      </div>
    </template>
    <template v-if="activeName == 2">
      <div class="scroll-view-box bg-color-gray" style="padding: 0;">
        <div class="project-top-box" v-if="$fieldShowFunc('11-khsj')">
          <div class="user-title-box">客户数据</div>
          <div class="flex ac item-box">
            <div class="item-box-item" v-if="$fieldShowFunc('kh_yqyxms')">
              <p class="title">已签约项目数</p>
              <p class="num">{{ projectsStatData.signed_contracts_num }}</p>
            </div>
            <div class="item-box-item" v-if="$fieldShowFunc('kh_yqxs')">
              <p class="title">已取消数</p>
              <p class="num">{{ projectsStatData.cancel_num }}</p>
            </div>
            <div class="item-box-item" v-if="$fieldShowFunc('kh_qyze')">
              <p class="title">签约总额(元)</p>
              <p class="num">{{ projectsStatData.total_contract_price }}</p>
            </div>
            <div class="item-box-item" v-if="$fieldShowFunc('kh_jsze')">
              <p class="title">结算总额(元)</p>
              <p class="num">{{ projectsStatData.total_final_settlement_amount }}</p>
            </div>
            <div class="item-box-item" v-if="$fieldShowFunc('kh_wjsze')">
              <p class="title">未结算总额(元)</p>
              <p class="num">{{ projectsStatData.pending_settlement }}</p>
            </div>
            <div class="item-box-item" v-if="$fieldShowFunc('kh_zhqbb')">
              <p class="title">综合签报比</p>
              <p class="num">{{ projectsStatData.comprehensive_quotation_ratio }}%</p>
            </div>
          </div>
        </div>
        <div class="project-content-box" v-if="$fieldShowFunc('11-xmlb')">
          <div class="user-title-box">项目数据</div>
          <el-table style="border: 1px solid #F5F7FA;border-bottom: 0;" height="96%" :header-cell-style="{
            background: '#FAFBFC',
            color: '#828A9D',
            textAlign: 'center',
          }" :cell-style="{ textAlign: 'center', color: '#1B2431' }" :data="tableData">
            <el-table-column v-if="$fieldShowFunc('kh_xmmc')" width="200" prop="project_name" label="项目名称"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.project_name || '--' }}
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('kh_xmbh')" width="200" prop="project_number" label="项目编号"
              show-overflow-tooltip>
              <template slot-scope="scope">
                <el-button v-if="$isPer(permission, ['customerDetail_projectDetail'])" type="text"
                  @click.stop="goToDetail(scope.row)">{{
                    scope.row.project_number || '--'
                  }}</el-button>
                <span v-else>{{ scope.row.project_number || '--' }}</span>
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('kh_xmpp')" width="200" prop="brand_name" label="项目品牌"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.brand_name || '--' }}
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('kh_xmlx')" width="200" prop="store_type_name" label="项目类型"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.store_type_name || '--' }}
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('kh_kclx')" width="200" prop="survey_site" label="勘场类型"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.survey_site || '--' }}
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('kh_xmjd')" width="200" prop="display_status" label="项目进度"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.display_status || '--' }}
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('kh_ssq')" width="200" prop="area" label="省市区" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.area || '--' }}
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('kh_xxdz')" width="200" prop="address" label="详细地址"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.address || '--' }}
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('kh_xmcjsj')" width="200" prop="created_at" label="项目创建时间"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.created_at || '--' }}
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('kh_ppjl')" width="200" prop="channel_manager_name" label="品牌经理"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.channel_manager_name || '--' }}
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('kh_khjl')" width="200" prop="account_manager_name" label="客户经理"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.account_manager_name || '--' }}
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('kh_qybjb')" width="200" prop="quotation_ratio" label="签约报价比"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.quotation_ratio ? +scope.row.quotation_ratio + '%' : '--' }}
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('kh_scbjje')" width="200" prop="system_quotation" label="首次报价金额"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.system_quotation ? +scope.row.system_quotation + '元' : '--' }}
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('kh_zzbjje')" width="200" prop="quotation_amount" label="最终报价金额"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.quotation_amount ? +scope.row.quotation_amount + '元' : '--' }}
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('kh_htqyje')" width="200" prop="contract_price" label="合同签约金额"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.contract_price ? +scope.row.contract_price + '元' : '--' }}
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('kh_sjjsje')" width="200" prop="final_settlement_amount"
              label="实际结算金额" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.final_settlement_amount ? +scope.row.final_settlement_amount + '元' : '--' }}
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('kh_htkgrq')" width="200" prop="contract_commencement_date"
              label="合同开工日期" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.contract_commencement_date || '--' }}
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('kh_htwgrq')" width="200" prop="contract_completion_date"
              label="合同完工日期" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.contract_completion_date || '--' }}
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('kh_htgq')" width="200" prop="contract_duration_days" label="合同工期"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.contract_duration_days ? +scope.row.contract_duration_days + '天' : '--' }}
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('kh_sjkgrq')" width="200" prop="on_site_start_date" label="实际开工日期"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.on_site_start_date || '--' }}
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('kh_sjwgrq')" width="200" prop="actual_completion_date" label="实际完工日期"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.actual_completion_date || '--' }}
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('kh_sjgq')" width="200" prop="actual_construction_period" label="实际工期"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.actual_construction_period ? +scope.row.actual_construction_period + '天' : '--' }}
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('kh_jswcsj')" width="200" prop="settlement_completion_date"
              label="结算完成时间" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.settlement_completion_date || '--' }}
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('kh_ysk')" width="200" prop="paid_amount" label="已收款"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.paid_amount ? +scope.row.paid_amount + '元' : '--' }}
              </template>
            </el-table-column>
            <el-table-column v-if="$fieldShowFunc('kh_dsk')" width="200" prop="unpaid_amount" label="待收款"
              show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.unpaid_amount ? +scope.row.unpaid_amount + '元' : '--' }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </template>
  </div>
</template>
<script>
import adminApi from '@/api/adminApi';

export default {
  name: 'customerDetailNewPage',
  data() {
    return {
      projectsStatData: {},
      userData: {},
      tableData: [],
      activeName: "1",
      permission: [],//操作权限
    };
  },
  computed: {

  },
  mounted() {
    // 操作权限
    this.$getHtmlAuthority('/customerManagement').then(res => {
      console.log(res, "getHtmlAuthority");
      this.permission = res.data.permission;
    })
    this.getUserDetail();
    this.getUserProjectsStat();
    this.getUserProjectsList();
  },
  methods: {
    // 项目详情
    goToDetail(row) {
      this.$store.commit('isEventTriggeredFunc', true);
      this.$router.push({ path: "/projectDetailNew", query: { id: row.id } });
    },
    // 编辑
    editFunc() {
      this.$store.commit('isEventTriggeredFunc', true);
      this.$router.push({
        path: "/addCustomerPage",
        query: { id: this.$route.query.id },
      });
    },
    // 用户详情
    getUserDetail() {
      if (!this.$route.query.id) return;
      adminApi.getUserDetail({
        user_id: this.$route.query.id
      }).then(res => {
        console.log(res, "客户详情")
        if (res.code == 200) {
          this.userData = res.data;
        }
      })
    },
    // 客户项目统计
    getUserProjectsStat() {
      if (!this.$route.query.id) return;
      adminApi.getUserProjectsStat({
        user_id: this.$route.query.id
      }).then(res => {
        console.log(res, "客户项目统计")
        if (res.code == 200) {
          this.projectsStatData = res.data;
        }
      })
    },
    // 客户项目列表
    getUserProjectsList() {
      adminApi.getUserProjectsList({
        page: 1,
        num: 999,
        user_id: this.$route.query.id
      }).then(res => {
        console.log(res, '客户项目列表')
        if (res.code == 200) {
          this.tableData = res.data.list;
        }
      })
    },
  },
};
</script>
<style lang="scss" scoped>
@import "./index.scss";
@import '@/styles/detail.scss';
</style>
<style lang="scss"></style>